<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Sistem Informasi Procurement</title>
	<?php echo css_asset('ext-all.css');?>
	<?php echo css_asset('xtheme-gray.css');?>
	<?php echo css_asset('file-upload.css');?>
	<?php echo css_asset('docs.css');?>
	<?php echo css_asset('superboxselect-gray-extend.css');?>
	
    <?php echo js_asset('ext-base.js');?>
    <?php echo js_asset('ext-all.js');?>
    <?php echo js_asset('locale/ext-lang-id.js');?>
	
	<?php echo js_asset('StatusBar.js');?>
	<?php echo js_asset('SearchField.js');?>
	<?php echo js_asset('CheckColumn.js');?>
	<?php echo js_asset('RowEditor.js');?>
	<?php echo js_asset('RowExpander.js');?>
	<?php echo js_asset('NumericField.js');?>
	<?php echo js_asset('currency.js');?>
	<?php echo js_asset('FileUploadField.js');?>
    <?php echo js_asset('SuperBoxSelect.js'); ?>
	
    <?php echo js_asset('tiny_mce/tiny_mce.js');?>
    <?php echo js_asset('Ext.ux.TinyMCE.js');?>
    
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <?php echo js_asset("highstock.js","highstock"); ?>
    
<script type="text/javascript">
	/*var s = document.createElement("script");
	s.type = 'text/javascript';
	s.src = './assets/js/locale/ext-lang-id.js';
	s.charset = "ascii";
	document.getElementsByTagName("head")[0].appendChild(s);*/
</script>
    <?php //echo js_asset('PagingMemoryProxy.js');?>
  	<link rel="shortcut icon" href="./favicon.ico" />

	<style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png);
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png);
    }
	.style1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px;
	}
    .style2 {
		font-size: large;
		font-family: "Courier New", Courier, monospace;
	}
	.style5 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: small;
		color: #AF4046;
	}
	.rmoney_b .x-form-field {text-align:right; font-weight:bold; }

	.rmoney .x-form-field {text-align:right; }
	
	<?php
	if(count($menus)){
		foreach($menus as $allmenu){
			echo ".icon-".$allmenu['menu_id']." {
			    background-image: url(./assets/images/icons/".($allmenu['menu_iconmenu'] != '' ? $allmenu['menu_iconmenu'] : 'app.png').") !important;
			}";
		}
	}
	
	?>
    </style>
	
	<script type="text/javascript">
	Ext.BLANK_IMAGE_URL = 'assets/images/s.gif';
	
	Docs = {};
	Docs.icons = {"Icons":"icon-frm"};
	DocPanel = Ext.extend(Ext.Panel, {
		closable: true,
		autoScroll:true,
		
		initComponent : function(){
			var ps = this.cclass.split('.');
			this.title = ps[ps.length-1];
			
			DocPanel.superclass.initComponent.call(this);
		},
		
	});
	
	MainPanel = function(){
		MainPanel.superclass.constructor.call(this, {
			id:'main-panel',
			region:'center',
			margins:'0 5 5 0',
			resizeTabs: true,
			minTabWidth: 135,
			tabWidth: 135,
			enableTabScroll: true,
			activeTab: 0,
			items: {
				id:'welcome-panel',
				title: 'Home',
				autoLoad: {url: 'index.php?c=welcome', scripts: true, scope: this},
				iconCls:'icon-docs',
				autoScroll: true
			}
		});
		
	};
	
	Ext.extend(MainPanel, Ext.TabPanel, {
		loadClass: function(href, cls, member){
			var id = 'docs-' + cls;
			var autoLoad = {url: href, scripts: true};
			//var tabs = Ext.getCmp('main-panel');
            this.add({
				id: id,
                title: cls,
                //html: 'Tab Body ',
                minTabWidth: 60,
                closable:true,
                autoLoad: autoLoad,
				autoScroll: true,
                iconCls: Docs.icons[cls]
            }).show();
		}
	});
	var mainPanel = new MainPanel();
	Ext.EventManager.on(window, 'keydown', function(e, t){
		if (e.getKey() == e.BACKSPACE && (!/^input$/i.test(t.tagName) || t.disabled || t.readOnly)) {
			e.stopEvent();
		}
	});
    Ext.onReady(function(){
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
				cls: 'docs-header',
				height: 44,
				region:'north',
				el:'header',
				border:false,
				margins: '0 0 5 0'
            }), {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: 'West',
                split: true,
				header: false,
                width: 200,
                minSize: 200,
                maxSize: 200,
                collapsible: true,
                margins:'0 0 0 0',
				cmargins:'0 0 0 0',
				rootVisible:false,
				lines:false,
				autoScroll:true,
				animCollapse:false,
				animate: false,
				collapseMode:'mini',
				collapseFirst:false,
                layout: {
                    type: 'border',
                    animate: true
                },
                items: [{
					region: 'center',
					//collapsible: true,
					title: 'List Menu',
					xtype: 'treepanel',
					width: 200,
					autoScroll: true,
					split: true,
					dataUrl: './assets/list_menus.json',
					//loader: new Ext.tree.TreeLoader(),
					root: new Ext.tree.AsyncTreeNode({
						expanded: true
					}),
					rootVisible: false,
					listeners: {
						click: function(node, e) {
							if(node.isLeaf()){
								e.stopEvent();
								mainPanel.loadClass(node.attributes.href, node.id);
								//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.href + '" and "' + node.id + '"');
								//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
							}
						}
					}
				},{
					id: 'action-panel',
					title: 'Setting',
					region: 'south',
					split:false,
					height:164,
					cmargins:'2 2 2 2',
					margins: '0 0 0 0',
					iconCls:'icon-setting',
					frame: false,
					plain:false,
					border:true,
					collapsible:false,
					bodyStyle: 'padding: 10 0 0 10; background: url('+ Ext.BLANK_IMAGE_URL +');',
					autoScroll: false,
					layout: 'border',
					items: [{
						region: 'center',
						header: false,
						xtype: 'treepanel',
						width: 280,
						minSize: 175,
						maxSize: 186,
						collapsible: true,
						margins:'0 0 0 0',
						cmargins:'0 0 0 0',
						rootVisible:false,
						lines:false,
						autoScroll:true,
						animCollapse:false,
						animate: true,
						collapseMode:'mini',
						bodyStyle: 'padding: 10px 0 0 0;backgroundColor:#FFFFFF;',
						dataUrl: './assets/setting_menus.json',
						//loader: new Ext.tree.TreeLoader(),
						root: new Ext.tree.AsyncTreeNode({
							expanded: true
						}),
						collapseFirst:false,
						border: false,
						listeners: {
							click: function(node, e) {
								if(node.isLeaf()){
									e.stopEvent();
									if(node.id == "Logout"){
										window.location = 'index.php?c=main&m=logout';
									}else{
										mainPanel.loadClass(node.attributes.href, node.id);
									}
									//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.href + '" and "' + node.id + '"');
									//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
								}
							}
						},
						bbar: new Ext.ux.StatusBar({
							id: 'form-statusbar',
							defaultText: 'Ready'
						})
					}]
				}]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
			mainPanel
            /*new Ext.TabPanel({
                id: 'tabspanel',
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                enableTabScroll:true,
                activeTab: 0,     // first tab initially active
                items: [{
                    contentEl: 'center1',
                    title: 'Close Me',
                    closable: true,
                    autoScroll: true
                }, {
                    contentEl: 'center2',
                    title: 'Center Panel',
                    autoScroll: true
                }]
            })*/]
        });
        
        var form_panel = new Ext.FormPanel({
            title: 'TinyMCE',
            labelAlign: 'left',
            bodyStyle:'padding:5px',
            //autoHeight:true,
            width: 600,
            height: 400,
            //renderTo: 'form_tiny',
            items: [{
                xtype: "tinymce",
                ref: "editor",
                hideLabel: true,
                tinymceSettings: {
                    theme : "advanced",
                    plugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
                    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|",
                    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
                    theme_advanced_toolbar_location : "top",
                    theme_advanced_toolbar_align : "left",
                    theme_advanced_statusbar_location : "bottom",
                    theme_advanced_resizing : false,
                    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
                },
                value: "<h1>Demo</h1><p>Ext.ux.TinyMCE works...</p>"
            }]
        });
        
        function addTab(){
            var tabs = Ext.getCmp('tabspanel');
            tabs.add({
                title: 'New Tab dsafds fds fdsf sdfasf dsf adsf sadf adsf as f',
                //html: 'Tab Body ',
                minTabWidth: 60,
                closable:true,
                items: [form_panel]
            }).show();
        }
        //addTab();
    });
    </script>
</head>
<body scroll="no">
	<div id="header">
		<img style="margin-left: 5px" src="<?php echo image_asset_url('logo.png');?>" alt="Ext JS API Documentation" height="49" width="380" />
		<div style="float:right; margin-top: 15px;margin-right: 10px;color: #CCC">
			<font color="#000000">Selamat datang <b><?php echo @$_SESSION[SESSION_USERID];?></b> ,</font><a href="index.php?c=main&m=logout" style="padding:5px">Logout</a>
		</div>
	</div>
</body>
</html>